<template>
  <div class="sidebar-toolbar">
    <!-- 顶部用户头像区域 -->
    <div class="border-bottom">
      <UserAvatar />
    </div>
    <!-- 主要工具栏 -->
    <div class="d-flex flex-column align-items-center p-3 flex-grow-1 overflow-y-auto">
      <div
        v-for="item in uiStore.toolbarItems"
        :key="item.id"
        class="toolbar-item mb-2 position-relative"
        :class="{ 'toolbar-item-active': uiStore.activeToolbarItem === item.id }"
        :title="item.name"
        @click="handleToolbarClick(item.id)"
      >
        <div class="toolbar-icon">
          <component :is="getIconComponent(item.icon)" :size="20" />
        </div>
        <!-- 徽章显示 -->
        <div
          v-if="(item.id === 'chat' ? chatBadgeCount : item.badgeCount) > 0"
          class="badge-count fs-mini"
        >
          {{
            item.id === 'chat' ? (chatBadgeCount > 99 ? '99+' : chatBadgeCount) : item.badgeCount
          }}
        </div>
      </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="d-flex flex-column align-items-center p-3 border-top">
      <div
        v-for="item in uiStore.bottomToolbarItems"
        :key="item.id"
        class="toolbar-item mb-2"
        :title="item.name"
        @click="handleBottomToolbarClick(item.id)"
      >
        <div class="toolbar-icon">
          <component :is="getIconComponent(item.icon)" :size="20" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { useUIStore } from '@/store/ui'
import { useChatStore } from '@/store/chat'
import { useDevTools } from '@/composables/useDevTools'
import {
  MessageCircle,
  Users,
  Folder,
  Palette,
  Settings,
  ChevronLeft,
  LogOut,
  Bell
} from 'lucide-vue-next'
import UserAvatar from '@/components/UserAvatar.vue'

const router = useRouter()
const userStore = useUserStore()
const uiStore = useUIStore()
const chatStore = useChatStore()
const { toggleDevTools } = useDevTools()
const ipcRenderer = window.electron?.ipcRenderer

// 计算总未读消息数，用于聊天按钮的徽章
const chatBadgeCount = computed(() => chatStore.totalUnreadCount)

// 图标映射
const iconMap = {
  MessageCircle,
  Users,
  Folder,
  Palette,
  Settings,
  ChevronLeft,
  LogOut,
  Bell
}

// 获取图标组件
const getIconComponent = (iconName: string): typeof MessageCircle | null => {
  return iconMap[iconName as keyof typeof iconMap] || null
}

// 处理工具栏项目点击
const handleToolbarClick = (itemId: string): void => {
  uiStore.setActiveToolbarItem(itemId)
  // 使用路由导航到对应页面
  router.push(`/home/${itemId}`)
}

// 处理底部工具栏点击
const handleBottomToolbarClick = (itemId: string): void => {
  if (itemId === 'devtools') {
    // 切换开发者工具
    toggleDevTools()
  } else if (itemId === 'collapse') {
    // 折叠侧边栏
    uiStore.toggleSidebar()
  } else if (itemId === 'logout') {
    // 处理登出逻辑
    console.log('用户点击登出')

    // 清除用户数据
    userStore.logout()

    if (ipcRenderer) {
      // Electron环境：通知主进程登出
      console.log('通知主进程登出...')
      ipcRenderer.send('logout')
    } else {
      // Web环境：直接跳转到登录页
      console.log('Web环境，直接跳转到登录页')
      router.push('/login')
    }
  }
}
</script>

<style scoped>
.sidebar-toolbar {
  width: 70px;
  height: 100vh;
  background-color: var(--theme-bg-secondary);
  border-right: 1px solid var(--theme-border-light);
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
}

.toolbar-item {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing-function);
  background-color: transparent;
}

.toolbar-item:hover {
  background-color: var(--theme-bg-tertiary);
  transform: scale(1.05);
}

.toolbar-item-active {
  background-color: var(--theme-primary) !important;
  color: white;
}

.toolbar-item-active:hover {
  background-color: var(--theme-primary-hover) !important;
}

.toolbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-large);
}

.toolbar-item-active .toolbar-icon {
  color: white;
}
</style>
